import React, { Component } from 'react';

import Unit from '../../unit';

import Child from './child';
// es6
import Unit2 from 'unit-restful-axios';
// cmd
var ljmtest = require('ljm-unit-clog');

class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            data:[]
        }
    }
    testApi(type){
        // get all
        Unit2.getApi2('/api2/users',{page:1,page_size:10,type:type},{}).then((res)=>{
            console.log(res.data)
            this.setState({
                data:res.data.user
            })
        })
        // // // // get one
        // const id = 167;
        // Unit.getApi2(`/users/${id}`,{},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // // 更新
        // let __id = 167;
        // Unit.putApi(`/users/${6}`,{name:'asdfadsf',age:32},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // // //删除ok
        // let _id = 5;
        // Unit.delApi(`/users/${_id}`,{},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // // 插入数据
        // Unit.postApi2('/users',{name:`${Math.round(Math.random()*10)}四明山`,age:46},{}).then((res)=>{
        //     console.log(res.data)
        // })

    }
    fnTest(fn){
        fn()
    }
    testApi2(){
        // get all
        // Unit.getApi2('/api2/nuser/',{},{}).then((res)=>{
        //     console.log(res.data)
        //
        // })
        // // // // get one
        // const id = 1;
        // Unit.getApi2(`/api2/nuser/${id}`,{},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // // //删除ok
        // let _id = 5;
        // Unit.delApi(`/users/${_id}`,{},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // 登录用户
        // Unit.postApi('/api2/nuser/login',{nickname:'llqfront',password:'56789'},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // // 创建用户
        // Unit.postApi2('/api2/nuser',{nickname:'llqfront',password:'12345'},{}).then((res)=>{
        //     console.log(res.data)
        // })

        // let __id = 1;
        // Unit.putApi(`/api2/nuser/${__id}`,{password:'56789'},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // setTimeout(()=>{
        //     let id = 1;
        //     Unit.getApi2(`/api2/nuser/${id}`,{},{}).then((res)=>{
        //         console.log(res.data)
        //     })
        // },3000)
        // setTimeout(()=>{
        //     let id = 1;
        //     Unit.postApi(`/api2/nuser/loginout`,{},{}).then((res)=>{
        //         console.log(res.data)
        //     })
        // },5000)

        // 插入数据
        Unit.postApi('/api2/userinfo',{username:`${Math.round(Math.random()*10)}555四明山`,password:12345},{}).then((res)=>{
            console.log(res.data)
        })
    }
    componentDidMount(){
        this.testApi2(2);


        ljmtest.init()
        this.fnTest(function(){
            console.log(1)
        })

        this.fnTest(function(){
            console.log(2)
        })
    }
    edit(val){
        const _this = this;
        Unit.putApi(`/users/${val.id}`,{name:'11111',age:32,type:2},{}).then((res)=>{
            console.log(res.data)
            // 两步操作
            // 第一步数组修改
            // 第二步ajax 操作

            setTimeout(()=>{
                _this.testApi(2);
            },2000)
        })
    }

    lists(){
        const { data } = this.state;
        const typeState = {
            '1':'正在空投',
            '2':'即将空投',
            '3':'空投结束',
        }
        return data.map((val,index)=>{
            return(
                <li key={val.id}>
                    id:{val.id}-----type:{val.type}-{typeState[val.type]}-----name:{val.name}----
                    <span onClick={()=>{this.edit(val)}}>修改</span>
                </li>
            )
        })
    }
    render(){
        const { data } = this.state;

        return(
            <div>
                {
                    data.length!==0?this.lists():''
                }
                <Child page="1"/>
                <div className="mxbox">
                    <div className="mbox1">
                    position:absolute<br/>
                    left top<br/>
                    right bottom 0<br/>
                    margin auto<br/>
                    </div>
                </div>
                <div className="mxbox">
                    <div className="mbox2">
                    position:absolute<br/>
                    left top 50%<br/>
                    asdfasdfa<br/>
                    margin:-一半<br/>

                    </div>
                </div>
                <div className="mxbox">
                    <div className="mbox3">
                    absolute<br/>
                    left:50%;<br/>
                    top:50%;<br/>
                    transform:<br/>
                    translate(-50%,-50%)<br/>

                    </div>
                </div>
                <div className="mxbox">
                    <div className="mbox4">
                    asdfasdfa<br/>
                    asdfasdfa<br/>
                    asdfasdfa<br/>
                    asdfasdfa<br/>

                    </div>
                </div>
            </div>
        )
    }
}

export default View;
